// 我是库位分配哦

<template>
  <div class="locationCascader">
    <el-dialog
      title="分配库位"
      :visible="isShowDialog"
      width="50%"
      :before-close="handleClose"
    >
      <div class="block">
        <el-cascader
          v-model="cascaderData"
          :options="options"
          :props="{ multiple: true }"
          collapse-tags
          clearable
        />
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button class="add" type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getAllWarehouse, getAreaTree, setOwnerLocation } from '@/api/owner'

export default {
  props: {
    isShowDialog: {
      type: Boolean,
      default: false
    },
    ownerId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      options: [],
      cascaderData: []
    }
  },

  async created() {
    this.render()
  },
  methods: {
    changeDisable(arr) {
      arr.forEach((element) => {
        if (element.children) {
          this.changeDisable(element.children)
        } else {
          element.disabled = element.ownerId !== null
        }
      })
    },
    handleClose() {},
    // 页面渲染函数
    async render() {
      const { data } = await getAllWarehouse()
      const arr = []
      for (const item of data) {
        let list = {}
        const { data } = await getAreaTree({ 仓库id: item.id })
        list = { ...item, children: data, label: item.name, value: item.id }
        arr.push(list)
      }
      arr.forEach((item) => this.changeDisable(item.children))
      this.options = arr
    },
    // 提交库位
    async submit() {
      const idStrArray = this.cascaderData.map((item) => item.join(','))
      await setOwnerLocation({ idStrArray, ownerId: this.ownerId })
      this.$message.success('分配成功啦')
      this.$emit('changeisShowDialog')
      this.$emit('render')
    }
  }
}
</script>

<style lang="scss" >

  .el-checkbox__input.is-checked,.el-checkbox__input.is-indeterminate{
    .el-checkbox__inner {
      background-color: #ffc132 ;
      border-color: #ffb200 ;
    }
  }

</style>
<style lang="scss" scoped>
.locationCascader {
  .el-button {
    border-radius: 20px;
    margin: 10px;
    &.add {
      background-color: rgb(255, 172, 48);
    }
  }
}
</style>
